<template>
  <WidgetList
    paginationPosition="left"
    :searchForm="searchForm"
    :fastForm="fastForm"
    :permission="permission"
    :collapse.sync="collapse"
    :fastProps="fastProps"
    :disabledRowFormat="disabledRowFormat"
    :formatRow="formatResoureList"
    :filterProps="{
      modelNumLabel: $t('statement.lr'),
      sharedAuth: false,
      lastSyncDateAuth: false,
      readNumAuth: false,
      receivedNumAuth: false,
      readyNumAuth: false
    }"
    @updateSelectionRows="updateSelectionRows"
    ref="widget-list"
    model="selection"
    pagination-position="right"
    :selectionRows="currentSelectionRows"
    :formatSelection="formatSelection"
  >
    <template v-slot:footer-action>
      <el-button type="primary" size="mini" @click.stop="onAdd">Add</el-button>
    </template>
  </WidgetList>
</template>

<script>
import WidgetList from '@/views/modules/widget/list/index'
import { merge, cloneDeep } from 'lodash'
import { PAGE_SETTING } from '@/components/storybook/settings/page'
import { getGadget } from '@/components/storybook/hooks/useGadget'

export default {
  name: 'WidgetTabpane',
  components: {
    WidgetList
  },
  props: {
    defaultSelectionRows: {
      type: Array,
      default: () => []
    },
    rootBusinessType: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      collapse: false,

      searchForm: {
        name: '',
        resourceType: 130,
        type: 2,
        internal: true,
        reuse: true,
        orderField: '',
        order: [{ sort: 'DESC', field: 'update_date' }],
        filter: {
          type: ['MSPbots Internal']
        },
        integration: {
          showAllIntegration: false,
          integrationGroup: []
        },
        pagination: merge(cloneDeep(PAGE_SETTING), {
          total: 0
        })
      },
      fastForm: {
        businessType: ['MSPbots Internal'],
        type: 'internal-slicer'
      },
      fastProps: {
        action: false
      },
      permission: {
        sharedAuth: false,
        lastSyncDateAuth: false,
        moreMenuAuth: false,
        collectAuth: false,
        fastAuth: false
      }
    }
  },
  computed: {
    currentSelectionRows() {
      return cloneDeep(this.defaultSelectionRows)
    }
  },
  methods: {
    updateSelectionRows(rows){
      this.$emit('updateSelectionRows', rows)
    },
    formatSelection: getGadget,
    formatResoureList(item) {
      if (item.type === 100101) {
        item.createName = item.companyName
        item.businessTypeName = 'Community'
      } else {
        item.createName = item.creatorName
        item.businessTypeName =
          item.businessType === 'MSPbots Internal'
            ? 'Internal'
            : item.businessType
      }
      return item
    },
    disabledRowFormat(item) {
      return !this.rootBusinessType.includes(item.businessType)
    },
    onAdd() {
      this.$emit('event:add', this.currentSelectionRows)
    }
  }
}
</script>
